<template>
    <el-popover placement="top" popper-class="user-info-popover" trigger="click">
        <!-- <div class="user-info-container">
            <div class="user-info">
                <h3>账号</h3>
                <span>{{ user.username }}</span>
            </div>
        </div> -->
        <div class="user_list">
            <div class="vipBox">
                <div class="vip_left">
                    <div class="vipText">{{ user.vip_name }}</div>
                    <span v-if="user.vip_days >= 0" class="end-time">{{ user.vip_days
                        }}天后到期</span>
                </div>
                <div class="vip_right" @click="goToUrl('/pay')">
                    <p class="update_vip">升级续费</p>
                </div>
            </div>

            <div class="btn_list">
                <i class="el-icon-monitor" />
                <div class="btn_list_right">
                    <a class="fe_cursor" @click="goToUrl('/DouyinOverview')">
                        <span> 工作台 </span>
                    </a>
                    <a class="fe_cursor" @click="goToUrl('/Commission')">
                        <span> 我的分销 </span>
                    </a>
                </div>
            </div>

            <div class="btn_list">
                <i class="el-icon-star-off" />
                <div class="btn_list_right">
                    <a class="fe_cursor" @click="goToUrl('/personList/collectible')">
                        <span> 关注达人 </span>
                    </a>
                    <a class="fe_cursor" @click="goToUrl('/KeywordDouyin/collectible')">
                        <span> 关注关键词 </span>
                    </a>
                    <a class="fe_cursor" @click="goToUrl('/DouyinTopic/collectible')">
                        <span> 关注选题 </span>
                    </a>
                </div>
            </div>

            <div class="btn_list">
                <i class="el-icon-setting" />
                <div class="btn_list_right">
                    <a class="fe_cursor" @click="goToUrl('/setting')">
                        <span> 个人中心 </span>
                    </a>
                    <a class="fe_cursor" @click="goToUrl('/setting?type=order')">
                        <span> 我的订单 </span>
                    </a>
                </div>
            </div>
            <!-- 
            <div class="logout_btn" >
                <i class="el-icon-switch-button" />
                <span class="txt">退出登录</span>
            </div> -->
        </div>
        <el-avatar slot="reference" size="medium" icon="el-icon-user-solid"
            style="cursor: pointer; margin-top: 4px;"></el-avatar>
    </el-popover>
</template>

<script>

import { mapActions, mapGetters, mapState } from "vuex";
export default {
    name: "FpHeaderUserInfoEdition",

    computed: {
        ...mapGetters({
            'isLogin': 'editor/isLogin'
        }),
        ...mapState({
            'user': state => state.editor.user,
            'editor': state => state.editor,
        })

    },
    mounted() {
        console.log(this.user)
    },
    methods: {
        goToUrl(path, isNeedLogin) {

            const url = process.env.VUE_APP_BASE_URL3 + path
            window.open(url)

        },
    }
}
</script>

<style scoped>
.user-info-container {
    width: 280px;
}

.user-info {
    height: 80px;
    margin-bottom: 8px;
    padding: 10px;
    background: linear-gradient(-45deg, #abc, #fff);
    border-radius: 3px 3px 0 0;
}

.user-info-item {
    height: 40px;
    border-bottom: 1px solid #fff;
    display: flex;
    padding: 0 20px;
    line-height: 40px;
    user-select: none;
}

.user-info-item:hover {
    background-color: #e8eaec;
    cursor: pointer;
}

.user-info-item .iconfont {
    width: 40px;
    color: var(--icon-color);
}

.user-info-item .title {
    color: #000;
}

.user_list {
    width: 230px;
    padding: 12px;

    .vipBox {
        height: 54px;

        background: #049e4d;
        border-radius: 4px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 10px 12px;

        .vip_left {
            display: flex;
            flex-direction: column;
            justify-content: center;

            .vipText {
                font-size: 15px;
                font-family: PingFang SC Bold, PingFang SC Bold-Bold;
                font-weight: 700;

                color: #fff;
            }

            .end-time {
                font-size: 12px;
                margin-top: 4px;
                color: #fff;
            }
        }

        .vip_right {
            flex-shrink: 0;

            .update_vip {
                width: 80px;
                height: 24px;
                border-radius: 12px;

                background: #fff;
                font-size: 13px;
                font-weight: 700;
                text-align: left;


                cursor: pointer;
                line-height: 24px;
                text-align: center;
                margin-bottom: 0;
            }
        }
    }

    .btn_list {
        display: flex;
        padding: 17px 0 0;
        border-bottom: 1px solid #dfdfdf;


        >i {
            margin-right: 12px;
            flex-shrink: 0;
            position: relative;
            font-size: 16px;
            height: 16px;
            line-height: 16px;
        }

        .btn_list_right {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;

            >a {
                width: 50%;
                font-weight: 500;
                font-size: 14px;

                cursor: pointer;
                margin-bottom: 15px;
                height: 18px;
                line-height: 18px;
            }

            >a:hover {
                color: #049e4d;
                border: none;
                padding: 0;
                outline: none;
            }
        }
    }

    .logout_btn {
        width: 100px;
        height: 30px;


        border-radius: 15px;
        font-size: 13px;
        font-weight: 700;
        text-align: left;

        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 16px auto 4px;
        cursor: pointer;

        .txt {
            margin-left: 4px;
        }
    }

    .logout_btn:hover {
        opacity: 0.8;
    }
}
</style>

<style>
.el-popover.el-popper.user-info-popover {
    padding: 0px 0 12px 0;
}

.el-popover.el-popper.user-info-popover .popper__arrow {
    display: none;
}
</style>

<style lang="scss" scoped></style>